<template>
  <div class="app-container">
    <!-- 表单 -->
    <el-form :label-position="labelPosition" size="small" :model="form" :inline="true">
      <el-form-item label="开始时间" style="font-weight:bold;">
        <el-date-picker v-model="form.startTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd" style="width:150px;" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" style="font-weight:bold;">
        <el-date-picker v-model="form.endTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd" style="width:150px;" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="校区" style="font-weight:bold;">
        <el-select v-model="form.campusId" placeholder="请选择校区" style="width:150px;" :disabled="clientRole == 6" clearable>
          <el-option v-for="item in CampusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="报修编号" style="font-weight:bold;">
        <el-input v-model="form.orderNo" placeholder="请输入报修编号" style="width:200px;" clearable></el-input>
      </el-form-item> -->
      <el-form-item label="维修工" style="font-weight:bold;">
        <el-select v-model="form.workerId" placeholder="请选择维修工" style="width:150px;" clearable>
          <el-option v-for="item in MaintainerList" :key="item.id" :label="item.workerName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="评价类型" style="font-weight:bold;">
        <el-select v-model="form.score" placeholder="请选择评价类型" style="width:150px;" clearable>
          <el-option label="好评" value="5"></el-option>
          <el-option label="中评" value="3"></el-option>
          <el-option label="差评" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报修人" style="font-weight:bold;">
        <el-input v-model="form.userName" placeholder="请输入" style="width:150px;" clearable></el-input>
      </el-form-item>


      <el-button size="small" class="search_button" type="primary" icon="el-icon-search"
        @click="getDataList">查询</el-button>
      <el-button size="small" class="reset_button" icon="el-icon-refresh" @click="reset">重置</el-button>
    </el-form>
    <!-- 表单 -->
    <el-divider></el-divider>

    <!-- 表格 -->
    <el-table size="medium" ref="multipleTable" :data="tableData" border style="width: 100%"
      @selection-change="handleSelectionChange">
      <!-- <el-table-column prop="id" label="ID" align="center"></el-table-column> -->
      <el-table-column prop="orderNo" label="报修编号" align="center" min-width="100"></el-table-column>
      <el-table-column prop="userName" label="报修人" align="center" min-width="100"></el-table-column>
      <el-table-column prop="campusName" label="校区" align="center"></el-table-column>
      <el-table-column prop="problemType" label="故障类型" align="center">
      </el-table-column>
      <el-table-column prop="workerName" label="维修工" align="center"></el-table-column>
      <el-table-column prop="score" label="评价类型" align="center">
        <template slot-scope="scope">
          <span v-if="(scope.row.score == 1)">差评</span>
          <span v-if="(scope.row.score == 3)">一般</span>
          <span v-if="(scope.row.score == 5)">五星好评</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" min-width="100"></el-table-column>
      <el-table-column prop="evaluationTime" label="评价时间" align="center" min-width="100"></el-table-column>
      <el-table-column prop="advice" label="评语" align="center"></el-table-column>
    </el-table>
    <!-- 表格 -->

    <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
      @size-change="handleSizeChange"></el-pagination>


  </div>
</template>

<script>
import { getEvaluate } from "@/api/MaintainView/Evaluate/index.js"
// import { getMaintainerList } from '_api/UserManage/Maintainer/index.js'
// import { getCampusName } from '_api/DormManage/Building/index.js'
export default {
  data() {
    return {
      labelPosition: "right",
      form: {
        startTime: "",
        endTime: "",
        userName: "",
        campusId: "",
        current: 0,
        field: "",
        order: "",
        orderNo: "",
        pageSize: 10,
        score: "",
        workerId: "",
        userId:""
      },
      tableData: [],
      MaintainerList: [],
      total: 0,
      CampusList: [],
      clientRole: ''
    }
  },
  methods: {
    handleSelectionChange() {

    },
    //重置
    reset() {
      this.form = {
        startTime: "",
        endTime: "",
        userName: "",
        campusId: "",
        current: 0,
        field: "",
        order: "",
        orderNo: "",
        pageSize: 10,
        score: "",
        workerId: ""
      }
      this.getEvaluate()
    },
    handleCurrentChange(e) {
      //当前页
      // console.log(e-1)
      this.form.current = e
      this.getEvaluate()
    },
    handleSizeChange(e) {
      this.form.pageSize = e
      this.getEvaluate()
    },
    // 查询按钮
    getDataList() {
      this.form.current = 0
      this.getEvaluate()
    },
    //评价列表查询
    getEvaluate() {
      this.form.userId=Number(window.localStorage.getItem('id'))
      getEvaluate(this.form).then(res => {
        console.log(res)
        if (res.data.success == true) {
          res.data.data.list.forEach(item => {
            item.userName = item.userName + item.userPhone
          })
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.tableData = res.data.data
          this.total = ""
          this.$message.info(res.data.message)
        }
      })
    },
    //查询维修工列表
    getMaintainerList() {
      getMaintainerList(
        {
          current: 0,
          deptId: "",
          field: "",
          name: "",
          order: "",
          pageSize: 100,
          type: ""
        }
      ).then(res => {
        if (res.status == 200) {
          this.MaintainerList = res.data.data.list
          // this.total = res.data.data.total
        }
      })
    },
    //查询校区名称
    getCampusName() {
      getCampusName().then(res => {
        console.log(res)
        if (res.status == 200) {
          this.CampusList = res.data.data
          this.CampusList.forEach(item => {
            if (item.name == window.localStorage.getItem('campusName')) {
              if (this.clientRole == 6) {
                this.form.campusId = item.id
              }
            }
          })
          this.getEvaluate()
          this.getMaintainerList()
        }
      })
    },
  },
  created() {
    // this.clientRole = window.localStorage.getItem('clientRole')
    this.getEvaluate()
    // this.getCampusName()
    // this.getMaintainerList()
  },
};
</script>
<style lang="scss" scoped>
.reset_button {
  margin-left: 10px;
}

.search_button {
  margin-left: 70px;
}

// .delete_button{
//   margin-left: 10px;
// }
.dialogbutton {
  margin-right: 40%;
}

.pagination {
  float: right;
  margin-top: 10px;
}
</style>
